<template>
  <!-- 创建活动 -->
  <div class="app-container">
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 基本信息配置 -->
        <el-tab-pane label="基本信息配置" name="first" style="margin-top:20px">
          <basicInfo @prize="prize" :title="second" ref="second" :activeId="activeId"></basicInfo>
        </el-tab-pane>
        <!-- 被邀请人奖品配置 form1 form2 -->
        <el-tab-pane label="被邀请人奖品配置" name="second" style="margin-top:20px">
          <inviteePrize @prize="prize" :title="third" :activeId="activeId" :obj="obj.data1"></inviteePrize>
        </el-tab-pane>
        <el-tab-pane label="邀请人奖品配置" name="third" style="margin-top:20px">
          <inviteePrize1 @prize="prize" :title="fourth" :activeId="activeId" :obj="obj.data2"></inviteePrize1>
        </el-tab-pane>
        <el-tab-pane label="分享设置" name="fourth" style="margin-top:20px">
          <share :title="five" :activeId="activeId" @prize="prize" :obj="obj.data3"></share>
        </el-tab-pane>
        <el-tab-pane label="老用户参与设置" name="five" style="margin-top:20px">
          <inviteePrize2 @prize="prize" :title="six" :activeId="activeId" :obj="obj.data4"></inviteePrize2>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import basicInfo from "@/views/invitation/compontents/basicInfo";
import inviteePrize from "@/views/invitation/compontents/inviteePrize";
import inviteePrize1 from "@/views/invitation/compontents/inviteePrize";
import inviteePrize2 from "@/views/invitation/compontents/inviteePrize";
import share from "@/views/invitation/compontents/share";
export default {
  components: {
    basicInfo,
    inviteePrize,
    inviteePrize1,
    inviteePrize2,
    share
  },
  name: "addActive",
  data() {
    return {
      activeName: "first",
      second: "second",
      third: "third",
      fourth: "fourth",
      five: "five",
      six: "six",
      obj: {
        data1: "",
        data2: "",
        data3: "",
        data4: ""
      },
      activeId: ""
    };
  },

  methods: {
    handleClick(tab, event) {
      // if (tab.paneName != "first") {
      //   this.$refs[tab.paneName].handleNext();
      // }
    },
    // 没有填写基础信息时返回基础信息提示消息
    showMsg() {
      this.$message({
        showClose: true,
        message: "请先填写基本信息",
        type: "warning"
      });
      this.activeName = "first";
    },
    // 5个tab页面都提交成功后返回邀请有礼列表
    handleBack() {
      if (
        this.activeId &&
        this.obj.data1 &&
        this.obj.data2 &&
        this.obj.data3 &&
        this.obj.data4
      ) {
        this.$router.push("/invitationList");
      }
    },
    // 邀请人奖品设置
    prize(title, id, only) {
      console.log("id", id);
      // console.log("title", title);
      if (title == "second") {
        this.activeName = title;
        this.activeId = id.id;
      } else if (title == "third") {
        if (id) {
          this.activeName = title;
          this.obj.data1 = only;
          this.handleBack();
        } else {
          this.showMsg();
        }
      } else if (title == "fourth") {
        if (id) {
          this.activeName = title;
          this.obj.data2 = only;
          this.handleBack();
        } else {
          this.showMsg();
        }
      } else if (title == "five") {
        if (id) {
          this.activeName = title;
          this.obj.data3 = only;
          this.handleBack();
        } else {
          this.showMsg();
        }
      } else if (title == "six") {
        if (id) {
          this.obj.data4 = only;
          this.handleBack();
        } else {
          this.showMsg();
        }
      }
    }
  }
};
</script>
<style scoped>
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>